<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="./assets/layui/css/layui.css" />
  </head>
  <body>
    <div class="layui-container"></div>

    <script src="./assets/layui/layui.js"></script>
    <script>
      layui.use("laytpl", function () {
        var laytpl = layui.laytpl;
        //直接解析字符
        laytpl("{{ d.name }}是一位公猿").render(
          {
            name: "贤心",
          },
          function (string) {
            console.log(string); //贤心是一位公猿
          }
        );
        //你也可以采用下述同步写法，将 render 方法的回调函数剔除，可直接返回渲染好的字符
        var string = laytpl("{{ d.name }}是一位公猿").render({
          name: "贤心",
        });
        console.log(string); //贤心是一位公猿
        // //如果模板较大，你也可以采用数据的写法，这样会比较直观一些
        laytpl(["{{ d.name }}是一位公猿", "其它字符 {{ d.content }}  其它字符"].join("")).render(
          {
            name: "233",
            content: "**其他字符",
          },
          function (string) {
            console.log(string);
          }
        );

        // // 配置分割符
        // laytpl.config({
        //   open: "<%",
        //   close: "%>",
        // });

        // //分割符将必须采用上述定义的
        // laytpl(
        //   [
        //     '<%# var type = "公"; %>', //JS 表达式
        //     "<% d.name %>是一位<% type %>猿。",
        //   ].join("")
        // ).render(
        //   {
        //     name: "贤心",
        //   },
        //   function (string) {
        //     console.log(string); //贤心是一位公猿
        //   }
        // );
      });
    </script>

    <!-- //第一步：编写模版。你可以使用一个script标签存放模板，如： -->
    <script id="demo" type="text/html">
      <h3>{{ d.title }}</h3>
      <ul>
        {{# layui.each(d.list, function(index, item){ }}
        <li>
          <span>{{ item.modname }}</span>
          <span>{{ item.alias }}：</span>
          <span>{{ item.site || '' }}</span>
        </li>
        {{# }); }} {{# if(d.list.length === 0){ }} 无数据 {{# } }}
      </ul>
    </script>

    <!-- //第二步：建立视图。用于呈现渲染结果。 -->
    <div id="view"></div>

    <script>
      //第三步：渲染模版
      var data = {
        //数据
        title: "Layui常用模块",
        list: [
          { modname: "弹层", alias: "layer", site: "layer.layui.com" },
          { modname: "表单", alias: "form" },
        ],
      };
      layui.use("laytpl", function () {
        var laytpl = layui.laytpl;
        var getTpl = demo.innerHTML,
          view = document.getElementById("view");
        laytpl(getTpl).render(data, function (html) {
          view.innerHTML = html;
        });
      });
    </script>
  </body>
</html>
